<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>3d动画 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/29.564f8747.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/css/03-CSS基本样式和选择器.html" class="sidebar-link">01-CSS基本样式和选择器</a></li><li><a href="/./guide/notes/css/04-盒模型.html" class="sidebar-link">02-CSS盒模型</a></li><li><a href="/./guide/notes/css/05-行内盒模型.html" class="sidebar-link">03-行内盒模型</a></li><li><a href="/./guide/notes/css/06-显示样式.html" class="sidebar-link">04-显示样式</a></li><li><a href="/./guide/notes/css/07-背景样式.html" class="sidebar-link">05-背景样式</a></li><li><a href="/./guide/notes/css/08-圆角渐变.html" class="sidebar-link">06-圆角渐变</a></li><li><a href="/./guide/notes/css/09-浮动.html" class="sidebar-link">07-浮动</a></li><li><a href="/./guide/notes/css/10-定位.html" class="sidebar-link">08-定位</a></li><li><a href="/./guide/notes/css/css样式书写顺序和命名规范.html" class="sidebar-link">09-css样式书写顺序和命名规范</a></li><li><a href="/./guide/notes/css/13-高级选择器和伪元素.html" class="sidebar-link">11-高级选择器和伪元素</a></li><li><a href="/./guide/notes/css/14-动画样式.html" class="sidebar-link">12-动画样式</a></li><li><a href="/./guide/notes/css/15-transform.html" class="sidebar-link">13-transform</a></li><li><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html" class="active sidebar-link">14-3D盒阴影和遮罩</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html#_3d动画" class="sidebar-link">3d动画</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html#盒子阴影" class="sidebar-link">盒子阴影</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html#滤镜" class="sidebar-link">滤镜</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/css/16-3d和盒阴影和遮罩.html#遮罩" class="sidebar-link">遮罩</a></li></ul></li><li><a href="/./guide/notes/css/17-弹性盒模型.html" class="sidebar-link">15-弹性盒模型</a></li><li><a href="/./guide/notes/css/18-阿里图标 组件化 swiper.html" class="sidebar-link">16-阿里图标 组件化 swiper</a></li><li><a href="/./guide/notes/css/19-响应式.html" class="sidebar-link">17-响应式</a></li><li><a href="/./guide/notes/css/less.html" class="sidebar-link">less</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_3d动画"><a href="#_3d动画" class="header-anchor">#</a> 3d动画</h2> <p><strong>3d立体空间 css3的属性,让我们非常简单的开发3d的应用</strong></p> <p>反观我们的2dtransform只是在平面上进行操作.</p> <p><strong>电脑上游览器绘制的不是真正的3d,而是游览器模拟出来的3d,是3d空间在屏幕当中的投影</strong></p> <hr> <p><strong>我们的双眼是怎么看见立体空间的?</strong></p> <blockquote><p>1.双眼,物体呈现的画面左右不同</p> <p>2.大脑:近大远小(景深),绘画领域:透视法则</p></blockquote> <p>如果我们能够模拟这样的效果,我们就可以欺骗我们的大脑,让大脑以为这是一个真实的3D空间,最终我们可以实现3D效果</p> <p><strong>如何出现3d的盒子,</strong></p> <ul><li>一个普通的盒子旋转(rotate),绕着我们的X轴或Y轴进行旋转.上面我们旋转默认是绕着Z轴旋转</li></ul> <p><strong>规定:立体空间坐标系</strong></p> <blockquote><p>提到立体空间坐标系,就是我们的三维空间,</p> <p>X轴和Y轴和以前一样</p> <p>但是多出来一条Z轴.</p> <p>**Z轴是什么(**画个图)</p> <p><strong>由屏幕到用户眼睛的轴为Z轴</strong></p> <p>这意味在离用户远的位置(Z轴负方向)上的元素,在屏幕上看起来应该小一些.</p> <p>离用户近的位置则应该大一些.</p> <p>而绕着X或Y轴旋转,也会导致元素某一部分变大,其余部分变小.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.box</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
		<span class="token property">margin</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
		<span class="token property">background-color</span><span class="token punctuation">:</span>skyblue<span class="token punctuation">;</span>
		<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
    	<span class="token comment">/*rota默认是绕着rotateZ轴旋转的,那我们想让看到立体效果是不是得换个轴.
    	我们也可以让盒子绕着X轴和Y轴进行旋转,
    	Y轴旋转是不是有点像是我们去翻书,然后把这本书翻开,是不是绕着我们Y轴进行旋转?*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>我们将rotateZ改成rotateY</p> <div class="language-CSS line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token comment">/*这个盒子变窄变瘦了,没有一个立体效果?为什么呢?
这是因为我们虽然写了rotateY,它确实绕着Y轴去旋转,
你可以想象一下我们竖直站在书的上面的去看这本书,绕着中心轴去翻,宽度会变窄.
所以单纯一个周的变换只会导致元素变窄,体现不会任何三维旋转*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li><strong>所以让盒子绕着Y轴旋转,一般是看不到立体效果的,要像看到立体效果,必须要有景深(近大远小)的概念</strong>.</li></ul> <p><strong>perspective:npx;距离盒子远处去进行观察,定义透视</strong></p> <blockquote><p>恰当的距离一般是600px-1000px,1000px大概20厘米的距离就差不多.</p> <p>这样的话确定用户距离这个元素有多远.</p> <p>离得越近,变化越大.离得越远,变化越小.</p> <p>默认是无穷远,所以不会发生明显的变化.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span>
		<span class="token property">perspective</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
    <span class="token comment">/*还是看不到我们的3d效果,这是为什么?
     这是因为我们现在所去观察这个盒子,你不要直勾勾去看这个盒子.
     这里我们去看这个盒子的时候,游览器做了一个规定,默认情况下我们是眼睛贴着盒子去看.
     所以你看盒子每一处都是一样大的,所以它不具备这样的一个立体空间的效果.
     所以有句话叫做不识庐山真面目,只缘身在此山中.
     当你脱离了这个平面站在一定距离就能去观察到它的全貌.
     我们就需要有一个观察的位置和视角,距离盒子这个平面空间Z轴远处去观察,才能去看到立体效果*/</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><strong>perspective:npx;距离盒子远处去进行观察,一般加到父级盒子上,在父级盒子中观察子盒子的立体效果</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">body</span><span class="token punctuation">{</span>
		<span class="token property">perspective</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
    <span class="token comment">/*此时打开开发者继续旋转,这有没有一种感觉,它好像变形了.
    这里好像是我们在看立体盒子的某一个侧面,这就是我们立体盒子绕着Y轴去进行旋转,
    现在中心点到一条边上是不是父级宽度的一半150px. */</span>
	<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>我们要去聊一下中心点在中间,</p> <p>中心点到前面一条边的距离是不是150px,假如我站在300ox的距离去观察,这样效果是不是更明显了,</p> <p>这是游览器通过一些计算让我们看上去有立体的效果,我们去写200px它就离我们越来越近了,</p> <p>假如我们去写150px,这张纸绕转90deg了之后像不像刚好从我们的眼前划了过去.</p></blockquote> <p>我们还可以写transform:rotateX</p> <div class="language-CSS line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateX</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token comment">/*绕着X轴的中心点去进行旋转*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>透视原点</strong></p> <blockquote><p>默认情况下,假定观察者的视线与应用透视元素相交于元素的中心.</p> <p>用术语来说,这意味着&quot;消失点&quot;在元素的中心.</p> <p>可以通过perspective-origin来修改消失点的位置.</p> <p>该属性与transform-origin类似,可以接受x/y坐标值(带关键字top,left.right.bottom),百分比或者长度值.</p> <p><strong>当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身，它是和perspective属性一起使用的，而且只影响 3D 转换元素</strong></p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;div class=&quot;wrap&quot;&gt;
		&lt;div class=&quot;son1&quot;&gt;&lt;/div&gt;
		&lt;div class=&quot;son2&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;

	.wrap</span><span class="token punctuation">{</span>
			<span class="token property">perspective</span><span class="token punctuation">:</span>1000px <span class="token punctuation">;</span>
			<span class="token property">perspective-origin</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.son1</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> turquoise<span class="token punctuation">;</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>40deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.son2</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p><strong>3d物体的制作方式</strong></p> <blockquote><ol><li>旋转物体  绕着X/Y轴进行旋转.</li> <li>站在父级的空间去进行观测,并且有一定的视距perspective.</li></ol></blockquote> <p><strong>做一个立方体这么搞</strong></p> <p>​	<strong>一个立体体有几个面,6个面(上下左右前后)</strong></p> <p>我这六个面本质是不是都是六个正方形?</p> <p>上下左右前后都是一个绝对的正方形.所以我们就用六个正方形去制作.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;div class=<span class="token string">&quot;cube&quot;</span>&gt;
		&lt;div class=<span class="token string">&quot;small&quot;</span>&gt;上&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;small&quot;</span>&gt;下&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;small&quot;</span>&gt;左&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;small&quot;</span>&gt;右&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;small&quot;</span>&gt;前&lt;/div&gt;
		&lt;div class=<span class="token string">&quot;small&quot;</span>&gt;后&lt;/div&gt;
&lt;/div&gt;
<span class="token comment">/*一个大盒子里面有六个小盒子分别代表正方体的六个面*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>接着我们来写CSS样式</p> <p>首先设置最外层大盒子的样式.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.cube</span> <span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 180px auto 0<span class="token punctuation">;</span>
			<span class="token property">perspective</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
			<span class="token comment">/*视距:设置的就是观察点（类似于眼睛）距离我们的3D元素的距离。
			  一般设置1000px大概就是我们眼睛到屏幕的距离*/</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>接着设置子元素的样式.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.cube .small</span> <span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
			<span class="token comment">/*把六个相同的盒子叠在一起*/</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token comment">/*设置六个盒子的宽高*/</span>
			<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 10px #ccc<span class="token punctuation">;</span>
			<span class="token comment">/*盒子模糊半径10px,颜色#ccc;*/</span>
			<span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
			<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
			<span class="token property">line-height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token comment">/*设置文字样式更有利于观察*/</span>
			<span class="token property">perspective</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
			<span class="token comment">/*给子元素添加视距*/</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>这时候分别移动六个面的Z轴形成正方体</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token selector">.cube .small:nth-child(1)</span> <span class="token punctuation">{</span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token comment">/*上面:X轴旋转90deg,此时Z轴朝上,Z轴再平移150px即可*/</span>
<span class="token selector">.cube .small:nth-child(2)</span> <span class="token punctuation">{</span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token comment">/*下面:X轴旋转-90deg,此时Z轴朝下,Z轴再平移150px即可*/</span>
	<span class="token selector">.cube .small:nth-child(3)</span> <span class="token punctuation">{</span>	
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token comment">/*左面:Y轴旋转-90deg,此时Z轴朝左,Z轴再平移150px即可*/</span>
<span class="token selector">.cube .small:nth-child(4)</span> <span class="token punctuation">{</span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token comment">/*右面:Y轴旋转90deg,此时Z轴朝右,Z轴再平移150px即可*/</span>
<span class="token selector">.cube .small:nth-child(5)</span> <span class="token punctuation">{</span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token comment">/*前面:直接朝着Z轴我们眼睛这条轴向前平移150px即可*/</span>	
<span class="token selector">.cube .small:nth-child(6)</span> <span class="token punctuation">{</span>
	<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token comment">/*后面:Y轴旋转180deg,此时Z轴朝后,Z轴再平移150px即可*/</span>		
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>此时3D盒子就已经出来了我们去让它旋转吧.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.cube</span> <span class="token punctuation">{</span><span class="token property">animation</span><span class="token punctuation">:</span> roll 4s linear infinite<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*定义了一个roll的动画,时间4s匀速无限循环*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>我们去设置动画的具体效果吧.</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@keyframes</span> roll</span> <span class="token punctuation">{</span>
			<span class="token selector">0%</span> <span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			<span class="token selector">100%</span> <span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
<span class="token comment">/*定义了roll动画的关键帧*/</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>这时候你会发现是一个扁的平面在旋转,不是我们正方体旋转,这是因为我们没有开启大盒子的3D空间</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.cube</span> <span class="token punctuation">{</span><span class="token property">transform-style</span><span class="token punctuation">:</span> preserve-3d<span class="token punctuation">;</span><span class="token punctuation">}</span>
	<span class="token comment">/*开启父级盒子的3d属性,能容纳子盒子*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>可是这时候又发现了为什么每个面都不一样大?因为这时候我们的视距还是在大盒子之上,相当于我们站在大盒子去看,这是我们就想单独站在每个小盒子上去看.把大盒子的视距去掉</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.cube .small</span> <span class="token punctuation">{</span> <span class="token property">perspective</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这时候我们一个简单旋转的3D盒子就制作完成了</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/*每个步骤的分解*/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> roll</span><span class="token punctuation">{</span>
			<span class="token selector">0%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
			<span class="token selector">50%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
			<span class="token selector">100%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
		<span class="token atrule"><span class="token rule">@keyframes</span> roll2</span><span class="token punctuation">{</span>
			<span class="token selector">0%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
			<span class="token selector">50%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
			<span class="token selector">100%</span><span class="token punctuation">{</span>
				<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>150px<span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> roll3</span><span class="token punctuation">{</span>
				<span class="token selector">0%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				<span class="token selector">50%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				<span class="token selector">100%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>250px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>

			<span class="token atrule"><span class="token rule">@keyframes</span> roll4</span><span class="token punctuation">{</span>
				<span class="token selector">0%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				<span class="token selector">50%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				<span class="token selector">100%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>250px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>

			<span class="token atrule"><span class="token rule">@keyframes</span> roll5</span><span class="token punctuation">{</span>
				<span class="token selector">0%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				<span class="token selector">100%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>250px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>

			<span class="token atrule"><span class="token rule">@keyframes</span> roll6</span><span class="token punctuation">{</span>
				<span class="token selector">0%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				<span class="token selector">100%</span><span class="token punctuation">{</span>
					<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotateY</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateZ</span><span class="token punctuation">(</span>-250px<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><p>perspective视角的位置问题</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;ul&gt;
	&lt;li&gt;
		&lt;div&gt;&lt;/div&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;div&gt;&lt;/div&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;div&gt;&lt;/div&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;div&gt;&lt;/div&gt;
	&lt;/li&gt;
&lt;/ul&gt;	
   ul</span><span class="token punctuation">{</span>
			<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">ul</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 200px auto<span class="token punctuation">;</span>
    	<span class="token comment">/*perspective: 500px 父级盒子添加视距,我们只是站在父级盒子一个点上去观察盒子.
		  大剧院,百叶窗*/</span>
		<span class="token punctuation">}</span>
		<span class="token selector">ul li</span><span class="token punctuation">{</span>
			<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    		<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">perspective</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
     <span class="token comment">/*对每个观测物体都添加特定的视角,从而解决单视角的问题 多个机位*/</span>
		<span class="token punctuation">}</span>
		<span class="token selector">ul li div</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">margin-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
			<span class="token property">border</span><span class="token punctuation">:</span> 3px solid skyblue<span class="token punctuation">;</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateY</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><h2 id="盒子阴影"><a href="#盒子阴影" class="header-anchor">#</a> 盒子阴影</h2> <h3 id="盒阴影属性介绍"><a href="#盒阴影属性介绍" class="header-anchor">#</a> 盒阴影属性介绍</h3> <p>盒阴影是CSS3中专门用来修饰元素边缘的，较之CSS2.1及之前的border，outline等属性，盒阴影既不会影响网页的整体布局，也能有更多的表现形式</p> <p>我们可以简单的整个网页内容进行一个分析，网页的布局就如同是把一个个的瓷砖贴在地板上，用户则是永远趴在天花板上看下面的瓷砖</p> <h3 id="盒阴影属性详解"><a href="#盒阴影属性详解" class="header-anchor">#</a> 盒阴影属性详解</h3> <p><strong>box-shadow：xOffset水平方向偏移 yOffset垂直方向偏移 burlLehgth阴影模糊距离  spread阴影缩放 color阴影颜色  outset 阴影显示方式;</strong></p> <ul><li><strong>box-shadow 属性用于向盒子添加一个或多个阴影效果。</strong></li></ul> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.wrap</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
			box-shadow：0px 0px 0 0 blue<span class="token punctuation">;</span>
<span class="token comment">/*盒阴影:水平方向不偏移  垂直方向不偏移 阴影模糊程度为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影*/</span>
    
    <span class="token comment">/*看似没有任何效果，原因其实很简单，因为此时影子的大小与元素一致，而且没有给影子设置偏移，那么以用户的从上往下看的视角来看，元素的影子全部都被元素本身给遮挡住了
而元素的xOffset属性值的作用就是把这个影子在原来的位置上设置一个偏移，当Xoffset的值为正值时，影子向右偏移，xOffset为负值时，影子向左偏移*/</span>
		<span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;wrap&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。</p> <p>offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。</p> <p>blur：阴影模糊度，指的是完全颜色到消失颜色的一个长度.不能取负数。此值的显示效果就好像是在原来的影子周围加上了一条有模糊渐变效果的边框，它能使影子看上去更大并且具有朦胧的效果，即便在元素没有偏移的时候，因为影子本身更大了，所以也能在元素的周围看到一层朦胧的蓝色光圈</p> <p>spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。</p> <p>color:影子的颜色，此处颜色可设置渐变色、英语单词、rgb、rgba、十六进制等，作用就是改变影子的颜色;默认黑色</p> <p>inset表示添加内阴影，默认为外阴影outset。但是如果给盒阴影加上inset，则影子的显示就如同在元素的边缘向内部蔓延一般，此时影子的大小会遮盖部分元素的内容</p> <p><em><strong>多个阴影的写法</strong></em></p> <p>​      <em>逗号隔开</em></p> <p>​      <em>box-shadow:10px 10px 10px 10px #ffcc33,-10px -10px 10px 10px #9933ff;</em></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token comment">/*阴影的实例*/</span>
<span class="token selector">&lt;div class=&quot;wrap&quot;&gt;
		&lt;div class=&quot;gradient&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;
.wrap</span> <span class="token punctuation">{</span>
			<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
			<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
			<span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
			<span class="token property">transition</span><span class="token punctuation">:</span> all .6s ease<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>

		<span class="token selector">.gradient</span> <span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
			<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">left</span><span class="token punctuation">:</span> -100%<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">skew</span><span class="token punctuation">(</span>-25deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>0deg<span class="token punctuation">,</span> <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token property">transition</span><span class="token punctuation">:</span> all .6s ease<span class="token punctuation">;</span>
			<span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>

		<span class="token selector">.wrap:hover</span> <span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-6px<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 20px 0 lightgreen<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap:hover .gradient</span> <span class="token punctuation">{</span>
			<span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
			<span class="token property">left</span><span class="token punctuation">:</span> 120%<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><h2 id="滤镜"><a href="#滤镜" class="header-anchor">#</a> 滤镜</h2> <div class="language-CSS line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.wrap</span><span class="token punctuation">{</span>
		<span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
		<span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
		<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>1.jpg<span class="token punctuation">)</span></span> no-repeat center/cover<span class="token punctuation">;</span>
		<span class="token property">margin</span><span class="token punctuation">:</span> 30px auto<span class="token punctuation">;</span>
		<span class="token property">transition</span><span class="token punctuation">:</span> 0.5s
		<span class="token punctuation">}</span>
	<span class="token selector">wrap:hover</span><span class="token punctuation">{</span>
       <span class="token property">filter</span><span class="token punctuation">:</span><span class="token function">brightness</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">/*亮度
    当倍数值大于1的时候元素会变亮，小于1的时候元素会变暗
该属性的作用为调整元素当前的亮度，一般来说可以适用于鼠标悬浮到某元素时的提醒作用*/</span>
     <span class="token punctuation">}</span>
	&lt;div class=<span class="token string">&quot;wrap&quot;</span>&gt;&lt;/div&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="language-scss line-numbers-mode"><pre class="language-scss"><code>对比度 <span class="token property">filter</span><span class="token punctuation">:</span><span class="token function">contrast</span><span class="token punctuation">(</span>百分比<span class="token punctuation">)</span><span class="token punctuation">;</span>默认是100%
所谓对比度，简单理解的话就是一个区域里面每个颜色都会变得格外显眼，黑的更黑，白的更白
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>模糊 filter：blur（模糊半径）像素
给图像设置高斯模糊。模糊半径的值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>灰色色阶 filter：<span class="token function">grayscale</span><span class="token punctuation">(</span>百分比<span class="token punctuation">)</span>默认是0%
该属性的作用较为简单，就是将一个颜色复杂的区域改造成一个只有黑白二色的区域。圆括号里面的值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>褐色色阶 filter：<span class="token function">sepia</span><span class="token punctuation">(</span>百分比<span class="token punctuation">)</span>默认是0%
该属性的作用同上，都是将某个区域的颜色进行简化，该属性会将一个颜色丰富的区域变成一种老黑白照片效果，让图片有一种轻微泛黄的样子
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>饱和度filter：saturate（%）；转换图像饱和度。圆括号里面的值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。随着饱和度的增加，颜色就会更“清楚”。饱和度越小，颜色就会越“淡”；
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/*实例*/</span>
<span class="token selector">&lt;div class=&quot;wrap&quot;&gt;
		&lt;div class=&quot;son1&quot;&gt;&lt;/div&gt;
		&lt;div class=&quot;son2&quot;&gt;&lt;/div&gt;
		&lt;div class=&quot;son3&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;	
	body</span><span class="token punctuation">{</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span>#000<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 20px auto<span class="token punctuation">;</span>
			<span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>20px<span class="token punctuation">)</span> <span class="token function">contrast</span><span class="token punctuation">(</span>30<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.wrap&gt;div</span><span class="token punctuation">{</span>
			<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
			<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
			<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
			<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.son2</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token selector">.son3</span><span class="token punctuation">{</span>
			<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token property">box-shadow</span><span class="token punctuation">:</span> 400px 0 0 #fff<span class="token punctuation">;</span>
			<span class="token property">animation</span><span class="token punctuation">:</span> move 1s linear infinite alternate<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		<span class="token atrule"><span class="token rule">@keyframes</span> move</span><span class="token punctuation">{</span>
			<span class="token selector">from</span><span class="token punctuation">{</span>
				<span class="token property">box-shadow</span><span class="token punctuation">:</span> 400px 0 0 #fff<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			<span class="token selector">to</span><span class="token punctuation">{</span>
				<span class="token property">box-shadow</span><span class="token punctuation">:</span> -800px 0 0 #fff<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div><hr> <h2 id="遮罩"><a href="#遮罩" class="header-anchor">#</a> 遮罩</h2> <blockquote><p><strong>遮住一部分,只露出一部分表现效果</strong></p> <p>css3的属性,不重要,兼容性也不好,IE浏览器不支持,webkit内核的浏览器(包括chrome、safari、IOS、android)需要添加-webkit-前缀。要特别注意的是，firefox浏览器也支持webkit-mask属性</p> <p>各种游览器对我们写出来的效果不一样.各种标准更新迭代也很快,对新标准的支持程度也不一.所以我你们要写出兼容性前缀要它更好的识别.</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">.box</span><span class="token punctuation">{</span>
			<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
			<span class="token property">background</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&quot;1.jpg&quot;</span><span class="token punctuation">)</span></span> no-repeat center/cover<span class="token punctuation">;</span>
			<span class="token property">margin</span><span class="token punctuation">:</span> 100px auto 0<span class="token punctuation">;</span>
			<span class="token property">-webkit-mask-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span>blue<span class="token punctuation">)</span><span class="token punctuation">;</span>
    	<span class="token punctuation">}</span>
			<span class="token comment">/*此时没有任何效果,打开控制台可以看到我们代码运行已经成功					了.
			  可是为什么没有效果呢?此时我们就要去讲,遮罩用什么遮的呢?
  			我们要用transparent透明去遮住图片.
         遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景*/</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">-webkit-mask-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span>transparent<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*这就有点相当于我们滤镜了,我们去给背景添加一个颜色*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">body</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue <span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token comment">/*图片会穿过透明层,观察到后面的内容.
  我们还可以写径向渐变去实现遮罩.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">-webkit-mask-image</span><span class="token punctuation">:</span><span class="token function">radial-gradient</span><span class="token punctuation">(</span>red<span class="token punctuation">,</span>transparent<span class="token punctuation">)</span>
<span class="token comment">/*我们还可以去写写百分比.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token property">-webkit-mask-image</span><span class="token punctuation">:</span><span class="token function">radial-gradient</span><span class="token punctuation">(</span>red 50%<span class="token punctuation">,</span>transparent 50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/*外围一圈就完全被遮住了.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>**ps:**遮罩可以用透明png图片实现去遮罩</p> <p>遮罩mask是一个复合属性，</p> <p>mask-image,默认值为none，值为透明图片，或透明渐变</p> <p>mask-repeat,默认值为repeat，可选值与background-repeat相同</p> <p>mask-position.默认值为0 0，可选值与background-position相同</p> <p>mask-clip,默认值为border-box，可选值与background-clip相同</p> <p>mask-origin,默认值为border-box，可选值与background-origin相同</p> <p>mask-size,默认值为auto，可选值与background-size相同</p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/css/15-transform.html" class="prev">
        13-transform
      </a></span> <span class="next"><a href="/./guide/notes/css/17-弹性盒模型.html">
        15-弹性盒模型
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/29.564f8747.js" defer></script>
  </body>
</html>
